import { Button, Input,Form, NavBar, Swiper } from 'antd-mobile'
import React from 'react'
import { NavLink } from 'react-router-dom'
import { useNavigate } from 'react-router-dom'
const Home = () => {
    const city=localStorage.getItem("city") || []
    const navigate =useNavigate()
     const onFinish = async(values) => {
      console.log(values);
     navigate("/list",{state:values})
  }

 
const data=[
   './images/1.jpg',
   './images/2.jpg',
   './images/3.jpg',
   './images/4.jpg',
]
  return (
    <div>
      
       <NavBar left={<NavLink to="/city">{city}</NavLink>} backIcon={false}>首页</NavBar>
       <Form 
         onFinish={onFinish}
         footer={
          <Button block type='submit' color='primary' size='large'>
            查询
          </Button>
        }
       >
          <Form.Item name='start' label='开始'>
             <Input></Input>
          </Form.Item>
          <Form.Item name='end' label='结束'>
             <Input></Input>
          </Form.Item>
       </Form>

       <Swiper loop autoplay>
        {
          data.map((v,i)=>{
            return <Swiper.Item key={i}>
            <img src={v} alt='' style={{width: "100%",height: "200px"}}/>
            </Swiper.Item>
          })
        }
       </Swiper>
    </div>
  )
}

export default Home
